import React, { Component } from 'react'
import { View, StyleSheet, Text, ScrollView, Image } from 'react-native'
import EZSwiper from 'react-native-ezswiper'


const UserInfo = [
    { name: "张旭", studentSno: 20181205066, position: "项目副经理" },
    { name: "王泽", studentSno: 20181205053, position: "技术总监" },
    { name: "李坤", studentSno: 20181205122, position: "项目公关" },
    { name: "赵天庆", studentSno: 20181205055, position: "后期技术总监" },
    { name: "李明研", studentSno: 20181205062, position: "团队骨干" }]

const pok = 0
const images = [require(`../sources/Me/pic/20181205066.jpg`), require(`../sources/Me/pic/20181205053.jpg`), require(`../sources/Me/pic/20181205122.jpg`), require(`../sources/Me/pic/20181205055.jpg`), require(`../sources/Me/pic/20181205062.jpg`)]

export default class Me extends Component {
    componentWillUnmount() {
        clearTimeout(this.pwdErrorTimer);
        clearTimeout(this.userNameErrorTimer);
    }


    renderImageRow(obj, index) {
        let pok = index
        return (
            <View style={[styles.cell]}>
                <Image
                    style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, width: undefined, height: undefined }}
                    resizeMode={'contain'}
                    source={obj} />
                <View style={{ position: "absolute", bottom: 10, alignItems: "center", right: 5 }}>
                    <Text style={styles.ImgText}>{UserInfo[pok].name}</Text>
                    <Text style={styles.ImgText}>{UserInfo[pok].studentSno}</Text>
                    <Text style={styles.ImgText}>{UserInfo[pok].position}</Text>
                </View>

            </View>

        )
    }


    render() {

        return (
            <View style={{ flex: 1 }}>
                <View style={{ height: 95, backgroundColor: '#C3473A' ,justifyContent:'center',flexDirection:'row',alignItems:'center'}}>
                    <View style={{marginTop:30}}>
                        <Text style={{ fontSize: 20, fontFamily: "Times New Roman",color:'#FFFFFF' }}>RN小组成员</Text>
                    </View>
                </View>

                <View style={styles.border}>
                    <EZSwiper style={styles.Swiper}
                        dataSource={images}
                        width={360}
                        height={350}
                        renderRow={this.renderImageRow}
                        ratio={0.7}
                        autoplayTimeout={3}
                    />
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    border: { alignItems: "center", justifyContent: "center", flex: 1, flexDirection: 'column' },
    cell: { flex: 1, alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },
    Swiper: { width: 360, height: 400 },
    ImgText: { backgroundColor: 'transparent', color: 'white' }
})